<template>
  <div id="App">
    <!-- 头部导航栏 -->
    <top-nav
      @displayLogin="toggle"
      :isLogin = 'isLogin'
      currPage = 'index'
    ></top-nav>

    <!-- content  -->
    <router-view
      name="main"
      class="body"
    >
    </router-view>

    <!-- 登录注册 -->
    <div class="login-register-wrap">
      <component
        :is="loginTog.tem"
        @close="loginTog.tem=''"
        :sonTarget ="loginTog.loginTem"
        @login = "isLogin=true"
      ></component>
      <!-- sonTarget用于显示登录界面后的相应login和 register -->
    </div>
  </div>
</template>

<script>
  import topNav from './components/public/topNav'
  import loginRegister from './components/public/loginRegister/loginRegister'

  export default {
    name: 'index',
    data () {
      return {
        // 登录相应
        loginTog : {
          // 用于显示登录的组件
          tem : '',
          //  相应的login页面 或者register
          loginTem: ''
        },
        // 保存登录状态
        isLogin : false
      }
    },
    components : {
      topNav : topNav,
      loginRegister : loginRegister
    },
    methods : {
      itemShow : function (event) {
        this.itemHover.currItem = event.target.dataset.index;
      },
      itemHidden : function () {
        this.itemHover.currItem = '';
      },
      // 该函数传入topNav中根据不同的按钮获取login 或者 register
      toggle : function (value) {
        // 用于显示登陆与注册页面
        this.loginTog.tem = 'loginRegister';
        // 用于 在登陆页面显示具体的login或者register
        this.loginTog.loginTem = value
      }
    }
  }
</script>

<style scoped>
  #App {
    overflow: hidden;
    position: relative;
  }
  .body {
    width: 1200px;
    height: 2000px;
    margin: 70px auto;
  }
</style>
